@woodytechnologies/metadata v1.3.4

Infos

This package is compatible with IN2IT v3.4.5 (> .120)

Usage

Quick start

You need to add the modal div in your html page, the modal will be rendered inside this div

<div id="modal" />

After that you can import the component and use it

import { useSate } from 'react'
import Metadata from '@woodytechnologies/metadata'

const defaultMetadataText = {
  id: 'usermetadata_text_138f76f9-5a95-4940-9abc-47a7d9d7d672',
  name: 'Ingest name',
  type: 'text',
  config: {
    type: {},
    format: {
      name: 'text',
      max_length: '15',
      multi_line: false,
    },
  },
  mandatory: true,
  accessibility: 'mandatory',
  default: 'New name',
  defaultName: 'New name',
  placeholder: 'Enter Ingest name',
  value: 'New name',
}

function App() {
  const [metadataText, setMetadataText] = useState(defaultMetadataText)

  function handleChange(newValue) {
    const newMetadataText = { ...metadataText, value: newValue }
    setMetadataText(newMetadataText)
  }

  return (
    <div className='App'>
      <Metadata data={metadataText} onChange={handleChange} />
    </div>
  )
}
export default App

Result :

Props

The data object

The meta object is the json data you got from the woody API : See API documentation

SessionID / Auth

Two props are available

• sessionID : The sessionID used to call the woody API
• browseUrl : The browseUrl used to call the woody API

const sessionID = "session_945aab3d-298a-420a-8304-3ce60fb39149"
const browseUrl = "https://my-dev-server.woody-technologies.com/browser/browse"

function App() {
  return (
    <div className='App'>
      <Metadata {...} sessionID={sessionID} browseUrl={browseUrl} />
    </div>
  )
}

Styling

scss variables are available to customize the component style deeply

:root {
  --main-color: black;
  --woody-secondary: #4b4b4b;
  --woody-mandatory: #e30613;

  --boolean-background-color: #808080;
  --boolean-knob-color: #d3d3d3;

  --text-area-background-color: #2b2c32;
  --text-area-text-color: white;

  --list-background-color: white;
  --list-text-color: black;

  --tag-background-color: #d3d3d3;
  --tag-text-color: black;

  --btn-background-color: #d3d3d3;
  --btn-text-color: black;
}