Basic usage

import InlineInput from '@semcore/ui/inline-input';
import type { InlineInputProps } from '@semcore/ui/inline-input';
import React from 'react';

const BasicUsage = (props: InlineInputProps) => {
  const { disabled, loading, state, autoFocus, defaultValue } = props;

  return (
    <InlineInput
      w={300}
      onBlurBehavior='cancel'
      onCancel={console.log}
      onChange={console.log}
      onConfirm={console.log}
      disabled={disabled}
      loading={loading}
      state={state}
    >
      <InlineInput.Addon htmlFor='basic-example' tag='label'>
        User name:
      </InlineInput.Addon>
      <InlineInput.Value id='basic-example' defaultValue={defaultValue} autoFocus={autoFocus} />
      <InlineInput.ConfirmControl />
      <InlineInput.CancelControl />
    </InlineInput>
  );
};

export const basicUsageDefaultProps: InlineInputProps = {
  disabled: false,
  loading: undefined,
  state: undefined,
  autoFocus: undefined,
  defaultValue: 'John Doe',
};

BasicUsage.defaultProps = basicUsageDefaultProps;

export default BasicUsage;

Inheriting text size

Component vertical size is based on inherited text size. Horizontal size should be explicitly set, otherwise component takes the whole width.

import EditM from '@semcore/ui/icon/Edit/m';
import InlineEdit from '@semcore/ui/inline-edit';
import InlineInput from '@semcore/ui/inline-input';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const Example = () => {
  const [title, setTitle] = React.useState('The Adventures of Intergalactic Whale');
  const [editingTitle, setEditingTitle] = React.useState(false);
  const [savingTitle, setSavingTitle] = React.useState(false);
  const stopEditing = () => setEditingTitle(false);
  const handleTitle = (title: any) => {
    setSavingTitle(true);
    /** Here we are doing some network activities */
    setTimeout(() => {
      setTitle(title);
      setSavingTitle(false);
      setEditingTitle(false);
    }, 3000);
  };

  return (
    <>
      <Text tag='h3' mb={2}>
        <InlineEdit editable={editingTitle} onEditableChange={setEditingTitle}>
          <InlineEdit.View pr={5}>
            {title}
            {' '}
            <EditM color='icon-secondary-neutral' />
          </InlineEdit.View>
          <InlineEdit.Edit>
            <InlineInput onConfirm={handleTitle} onCancel={stopEditing} loading={savingTitle}>
              <InlineInput.Value autoFocus defaultValue={title} aria-label='Article name' />
              <InlineInput.ConfirmControl />
              <InlineInput.CancelControl />
            </InlineInput>
          </InlineEdit.Edit>
        </InlineEdit>
      </Text>
      Once upon a time in a distant galaxy far, far away, there existed a legendary creature known
      as the Intergalactic Whale. This magnificent space-faring mammal was no ordinary whale. It had
      the power to swim through the cosmic ocean, jumping from one star system to another with grace
      and finesse.
    </>
  );
};

const Demo = Example;

export default Demo;

Number-only input

import InlineInput from '@semcore/ui/inline-input';
import React from 'react';

const Example = () => {
  return (
    <div>
      <InlineInput w={200}>
        <InlineInput.Addon htmlFor='number-example' tag='label'>
          Number:
        </InlineInput.Addon>
        <InlineInput.NumberValue id='number-example' defaultValue={100} />
        <InlineInput.NumberControls />
        <InlineInput.ConfirmControl />
      </InlineInput>
    </div>
  );
};

const Demo = Example;

export default Demo;