Function renderValue

packages/dev/s2-docs/src/VisualExampleClient.tsx:506–602

(value: any, indent = '')

}

function renderValue(value: any, indent = '') {
  switch (typeof value) {
    case 'string':
      return <span className={style({color: 'green-1000'})}>"{value}"</span>;
    case 'number':
      return <span className={style({color: 'pink-1000'})}>{String(value)}</span>;
    case 'boolean':
      return <span className={style({color: 'magenta-1000'})}>{String(value)}</span>;
    case 'object': {
      if (value == null) {
        return <span className={style({color: 'magenta-1000'})}>{String(value)}</span>;
      }
      if (Array.isArray(value)) {
        let res: ReactNode[] = value.map((item, i) => {
          let result = renderValue(item, indent);
          if (i < value.length - 1) {
            result = <>{result}, </>;
          }
          return <Fragment key={i}>{result}</Fragment>;
        });

        if (countChars(res) > 40) {
          res = res.map((p, i) => (
            <Fragment key={i}>
              {'\n  ' + indent}
              {p}
            </Fragment>
          ));
          res.push('\n  ');
        }

        return (
          <>
            {'['}
            {res}
            {']'}
          </>
        );
      }

      if (value instanceof Size) {
        return (
          <>
            <span className={style({color: 'magenta-1000'})}>new</span>{' '}
            <span className={style({color: 'red-1000'})}>Size</span>(
            <span className={style({color: 'pink-1000'})}>{value.width}</span>,{' '}
            <span className={style({color: 'pink-1000'})}>{value.height}</span>)
          </>
        );
      }

      if (value instanceof Date) {
        return (
          <>
            <span className={style({color: 'magenta-1000'})}>new</span>{' '}
            <span className={style({color: 'red-1000'})}>Date</span>(
            <span className={style({color: 'pink-1000'})}>{value.getFullYear()}</span>,{' '}
            <span className={style({color: 'pink-1000'})}>{value.getMonth()}</span>,{' '}