How to use react-with-direction - 10 common examples

const cacheRefRTL = useRef();
  const cacheRef = direction === DIRECTIONS.RTL ? cacheRefRTL : cacheRefLTR;

  // If the interface and theme haven't changed for this direction,
  // we return all the cached values immediately.
  if (
    cacheRef.current
    && stylesInterface
    && cacheRef.current.stylesInterface === stylesInterface
    && cacheRef.current.theme === theme
  ) {
    return cacheRef.current;
  }

  // (Re)Create the styles props for this direction
  const directionSelector = direction === DIRECTIONS.RTL ? 'RTL' : 'LTR';

  // Create the themed styles from the interface's create functions
  // with the theme and styles function provided
  let create = stylesInterface[`create${directionSelector}`] || stylesInterface.create;
  if (process.env.NODE_ENV !== 'production') {
    create = withPerf('create')(create);
  }
  const styles = create(stylesFn ? stylesFn(theme) : {});

  // Create the css function from the interface's resolve functions
  let resolve = stylesInterface[`resolve${directionSelector}`] || stylesInterface.resolve;
  if (process.env.NODE_ENV !== 'production') {
    resolve = withPerf('resolve')(resolve);
  }
  const css = (...args) => resolve(args);

export default function useThemedStyleSheetCache({ direction, stylesInterface, stylesTheme }) {
  const cacheRefLTR = useRef();
  const cacheRefRTL = useRef();

  // Retrieve the cached interface methods and created styles for this direction
  const cacheRef = direction === DIRECTIONS.RTL ? cacheRefRTL : cacheRefLTR;

  // If the interface and theme haven't changed for this direction,
  // we return all the cached values immediately.
  if (
    cacheRef.current
    && stylesInterface
    && cacheRef.current.stylesInterface === stylesInterface
    && cacheRef.current.stylesTheme === stylesTheme
  ) {
    return cacheRef.current;
  }

  // (Re)Create the cache for this direction if the theme or interface changed
  const directionSelector = direction === DIRECTIONS.RTL ? 'RTL' : 'LTR';
  cacheRef.current = {
    // Store the provided styles interface so that we can determine whether or not

// Retrieve the cached interface methods and created styles for this direction
  const cacheRef = direction === DIRECTIONS.RTL ? cacheRefRTL : cacheRefLTR;

  // If the interface and theme haven't changed for this direction,
  // we return all the cached values immediately.
  if (
    cacheRef.current
    && stylesInterface
    && cacheRef.current.stylesInterface === stylesInterface
    && cacheRef.current.stylesTheme === stylesTheme
  ) {
    return cacheRef.current;
  }

  // (Re)Create the cache for this direction if the theme or interface changed
  const directionSelector = direction === DIRECTIONS.RTL ? 'RTL' : 'LTR';
  cacheRef.current = {
    // Store the provided styles interface so that we can determine whether or not
    // the interface methods we have cached are still valid
    stylesInterface,
    // Store the provided styles theme so that we can determine whether or not the
    // interface methods and created styles we have cached are still valid
    stylesTheme,
    // Cache directional interface methods so we don't have to perform the access
    // logic every time the direction changes. This shouldn't happen often, but it
    // also simplifies the code.
    create: stylesInterface[`create${directionSelector}`] || stylesInterface.create,
    resolve: stylesInterface[`resolve${directionSelector}`] || stylesInterface.resolve,
    flush: stylesInterface.flush || NOOP,
    // Used to cache the styles object created for this direction, interface, and theme
    // combination used to create them.
    createdStyles: null,

// Fallback to the singleton implementation
  stylesInterface = stylesInterface || _getInterface();
  theme = theme || _getTheme();

  // Flush if specified
  if (flushBefore && stylesInterface.flush) {
    stylesInterface.flush();
  }

  // Use a cache to store the interface methods and created styles by direction.
  // This way, if the theme and the interface don't change, we do not recalculate
  // styles or any other interface derivations. They are effectively only calculated
  // once per direction, until the theme or interface change.
  const cacheRefLTR = useRef();
  const cacheRefRTL = useRef();
  const cacheRef = direction === DIRECTIONS.RTL ? cacheRefRTL : cacheRefLTR;

  // If the interface and theme haven't changed for this direction,
  // we return all the cached values immediately.
  if (
    cacheRef.current
    && stylesInterface
    && cacheRef.current.stylesInterface === stylesInterface
    && cacheRef.current.theme === theme
  ) {
    return cacheRef.current;
  }

  // (Re)Create the styles props for this direction
  const directionSelector = direction === DIRECTIONS.RTL ? 'RTL' : 'LTR';

  // Create the themed styles from the interface's create functions

function getStyleDef(direction, wrappedComponentName) {
    const currentTheme = getCurrentTheme(direction);
    let styleDef = direction === DIRECTIONS.LTR
      ? styleDefLTR
      : styleDefRTL;

    const registeredTheme = ThemedStyleSheet.get();

    // Return the existing styles if they've already been defined
    // and if the theme used to create them corresponds to the theme
    // registered with ThemedStyleSheet
    if (styleDef && currentTheme === registeredTheme) {
      return styleDef;
    }

    if (
      process.env.NODE_ENV !== 'production'
      && typeof performance !== 'undefined'
      && performance.mark !== undefined && typeof performance.clearMarks === 'function'

top: 20,
          }}
        />
      );
    }
    PitComponent.propTypes = {
      style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
      children: PropTypes.number,
    };
    PitComponent.defaultProps = {
      style: null,
      children: null,
    };

    return (
      
        
      
    );
  })
  .add('RTL Custom Handle', () => {

return (
        
      );
    }

    // Listen to directional updates via props
    // eslint-disable-next-line no-func-assign
    WithStyles = withDirection(WithStyles);

    // Make into a pure functional component if requested
    // eslint-disable-next-line no-func-assign
    WithStyles = pureComponent ? memo(WithStyles) : WithStyles;

    // Set React statics on WithStyles
    WithStyles.WrappedComponent = WrappedComponent;
    WithStyles.displayName = `withStyles(${wrappedComponentName})`;
    if (WrappedComponent.propTypes) {
      WithStyles.propTypes = { ...WrappedComponent.propTypes };
      delete WithStyles.propTypes[stylesPropName];
      delete WithStyles.propTypes[themePropName];
      delete WithStyles.propTypes[cssPropName];
    }
    if (WrappedComponent.defaultProps) {
      WithStyles.defaultProps = { ...WrappedComponent.defaultProps };

// and if the theme used to create them corresponds to the theme
    // registered with ThemedStyleSheet
    if (styleDef && currentTheme === registeredTheme) {
      return styleDef;
    }

    if (
      process.env.NODE_ENV !== 'production'
      && typeof performance !== 'undefined'
      && performance.mark !== undefined && typeof performance.clearMarks === 'function'
    ) {
      performance.clearMarks(START_MARK);
      performance.mark(START_MARK);
    }

    const isRTL = direction === DIRECTIONS.RTL;

    if (isRTL) {
      styleDefRTL = styleFn
        ? ThemedStyleSheet.createRTL(styleFn)
        : EMPTY_STYLES_FN;

      currentThemeRTL = registeredTheme;
      styleDef = styleDefRTL;
    } else {
      styleDefLTR = styleFn
        ? ThemedStyleSheet.createLTR(styleFn)
        : EMPTY_STYLES_FN;

      currentThemeLTR = registeredTheme;
      styleDef = styleDefLTR;
    }

positionPercent(x, y, sliderBox) {
    const { orientation, direction } = this.props;
    if (orientation === VERTICAL) {
      return ((y - sliderBox.top) / sliderBox.height) * PERCENT_FULL;
    }
    const horizontalPercentage = ((x - sliderBox.left) / sliderBox.width) * PERCENT_FULL;
    if (direction === DIRECTIONS.RTL) {
      return 100 - horizontalPercentage;
    }
    return horizontalPercentage;
  }

function getCurrentTheme(direction) {
    return direction === DIRECTIONS.LTR
      ? currentThemeLTR
      : currentThemeRTL;
  }