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

| Name | Type | Default | Description | | ------------ | -------- | ------- | -------------------------------------------------------------------------- | | data | object | {} | The metadata object | | onChange | function | null | The function called when the metadata is updated | | sessionID | string | "" | The sessionID used to call the woody API | | browseUrl | string | "" | The browseUrl used to call the woody API | | isSearchable | boolean | true | If the metadata is searchable or not (for metadata list and tags) | | index | number | null | The index of the metadata in the list | | inline | boolean | false | If the metadata is displayed inline or not | | showName | boolean | true | If the metadata name is displayed or not | | color | string | "" | The color of the metadata | | minified | boolean | false | If the metadata is displayed minified or not | | allowDrop | boolean | false | If the metadata is droppable or not | | onDrop | function | null | The function called when a metadata is dropped on the metadata (allowDrop) |

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;
}