Never Propel Marmalade

    @synerise/ds-inline-edit
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.40 • Public • Published

    id: inline-edit title: InlineEdit

    InlineEdit UI Component

    Example

    <InlineEdit
      input={{
        name: 'name-of-input',
        value: 'Value',
        maxLength: 120,
        placeholder: 'Placeholder',
        onBlur: () => {},
        onChange: event => {},
        onEnterPress: () => {},
      }}
      style={{ maxWidth: '128px' }}
      size={'normal'}
      error={false}
      disabled={false}
      hideIcon={false}
    />
    

    Demo

    <iframe src="/storybook-static/iframe.html?id=components-inline-edit--default"></iframe>

    InlineEdit API

    Property Description Type Default
    autoFocus Set focus on input after mount boolean false
    className Optional className for component string -
    disabled Disabled state of component boolean false
    error Error state of component boolean false
    hideIcon Hides input icon boolean false
    input Properties of the input InlineEditInput false
    size Component size normal / small normal
    style Styles object React.CSSProperties -
    tooltipTitle Text of the tooltip string -

    InlineSelect API

    Property Description Type Default
    autoFocus Set focus on input after mount boolean false
    className Optional className for component string -
    dataSource Menu items displayed in the dropdown MenuItemProps[] []
    disabled Disabled state of component boolean false
    dropdownOverlayStyle Styles object applied to the dropdown overlay wrapper React.CSSProperties {}
    dropdownProps Props object applied to the dropdown component DropdownProps {}
    error Error state of component boolean false
    expanded Initial expansion state of dropdown menu boolean false
    hideIcon Hides input icon boolean false
    initialValue Initial value of the select string / undefined -
    input Properties of the input InlineEditInput false
    placeholder Default text of the select string -
    size Component size normal / small normal
    style Styles object React.CSSProperties -
    tooltipTitle Text of the tooltip string -

    InlineEdit input API

    Property Description Type Default
    autocomplete Native html autocomplete attribute on / off off -
    defaultValue Default input value string number -
    disabled Disabled state of component boolean false -
    maxLength Maximum characters inside the input element number false -
    name Native html name attribute string - -
    placeholder Default text component string - -
    onBlur Called when input blured function - -
    onEnterPress Called when user press Enter in focused input function - -
    onChange Called when input chenged function - -

    Keywords

    none

    Install

    npm i @synerise/ds-inline-edit

    DownloadsWeekly Downloads

    141

    Version

    0.6.40

    License

    ISC

    Unpacked Size

    92.9 kB

    Total Files

    29

    Last publish

    Collaborators

    • synerise