How to use recompact - 10 common examples

UniqueTokenAttributes.propTypes = {
  background: PropTypes.string,
  dimensions: dimensionsPropType,
  onListLayout: PropTypes.func,
  onScroll: PropTypes.func,
  traits: PropTypes.arrayOf(PropTypes.shape({
    trait_type: PropTypes.string.isRequired,
    value: PropTypes.node.isRequired,
  })),
  willListOverflow: PropTypes.bool,
};

UniqueTokenAttributes.padding = AttributesPadding;

const enhance = compose(
  onlyUpdateForKeys(['traits', 'willListOverflow']),
  withState('willListOverflow', 'setWillListOverflow', false),
  withProps(({ traits }) => ({
    // Sort traits alphabetically by "trait_type"
    traits: sortList(traits, 'trait_type', 'asc'),
  })),
  withHandlers({
    onListLayout: ({ dimensions, setWillListOverflow }) => ({ nativeEvent: { layout } }) => {
      setWillListOverflow(layout.height > dimensions.height);
    },
    onScroll: () => event => event.stopPropagation(),
  }),
);
/* eslint-enable camelcase */

export default hoistStatics(enhance)(UniqueTokenAttributes);

export default Component => compose(
  connect(null, { assetsRefreshState, transactionsRefreshState }),
  withHandlers({
    refreshAccount: (ownProps) => async () => {
      try {
        await ownProps.assetsRefreshState();
        await ownProps.transactionsRefreshState();
      } catch (error) {
        // TODO more granular error messaging depending on offline status
      }
    },
  }),
)(Component);

/>
    )}
  
);

Pager.propTypes = {
  controlsProps: PropTypes.shape(PagerControls.propTypes),
  currentIndex: PropTypes.number,
  dimensions: dimensionsPropType,
  onScroll: PropTypes.func,
  onScrollEndDrag: PropTypes.func,
  pages: PropTypes.arrayOf(pagerPagePropType),
  scrollEnabled: PropTypes.bool,
};

export default compose(
  withState('currentIndex', 'setCurrentIndex', 0),
  mapProps(({ dimensions, pages, ...props }) => ({
    ...props,
    dimensions,
    pages: pages.map(page => ({
      ...page,
      dimensions,
    })),
  })),
  withProps(({ pages }) => ({
    scrollEnabled: pages.length > 1,
  })),
  withHandlers({
    onScroll: ({ currentIndex, dimensions, setCurrentIndex }) => ({ nativeEvent }) => {
      const currentOffsetX = get(nativeEvent, 'contentOffset.x', 0);

);
};

SettingsModal.propTypes = {
  currentSettingsPage: PropTypes.oneOf(Object.values(SettingsPages)),
  navigation: PropTypes.object,
  onCloseModal: PropTypes.func,
  onPressBack: PropTypes.func,
  onPressImportSeedPhrase: PropTypes.func,
  onPressSection: PropTypes.func,
};

export default compose(
  withProps(({ navigation }) => ({
    currentSettingsPage: get(
      navigation,
      'state.params.section',
      SettingsPages.default
    ),
  })),
  withHandlers({
    onCloseModal: ({ navigation }) => () => navigation.goBack(),
    onPressBack: ({ navigation }) => () =>
      navigation.setParams({ section: SettingsPages.default }),
    onPressImportSeedPhrase: ({ navigation }) => () => {
      navigation.goBack();
      InteractionManager.runAfterInteractions(() => {
        navigation.navigate('ImportSeedPhraseSheet');
        StatusBar.setBarStyle('light-content');

);

TokenExpandedState.propTypes = {
  change: PropTypes.string,
  changeDirection: PropTypes.bool,
  isOpen: PropTypes.bool,
  onPressSend: PropTypes.func,
  onPressSwap: PropTypes.func,
  price: PropTypes.string,
  selectedAsset: PropTypes.object,
  subtitle: PropTypes.string,
  title: PropTypes.string,
};

export default compose(
  withAccountData,
  withAccountSettings,
  withState('isOpen', 'setIsOpen', false),
  withProps(({ asset: { address, ...asset }, assets }) => {
    let selectedAsset = ethereumUtils.getAsset(assets, address);
    if (!selectedAsset) {
      selectedAsset = asset;
    }
    return {
      change: get(selectedAsset, 'native.change', '-'),
      changeDirection: get(selectedAsset, 'price.relative_change_24h', 0) > 0,
      selectedAsset,
    };
  }),
  withHandlers({
    onOpen: ({ setIsOpen }) => () => {

icon="send"
        label="Send to..."
        onPress={onPressSend}
      />
    
  
);

TokenExpandedState.propTypes = {
  onPressSend: PropTypes.func,
  price: PropTypes.string,
  subtitle: PropTypes.string,
  title: PropTypes.string,
};

export default compose(
  withAccountData,
  withAccountSettings,
  withProps(({
    asset: {
      address,
      name,
      symbol,
      ...asset
    },
    assets,
    nativeCurrencySymbol,
  }) => {
    const selectedAsset = ethereumUtils.getAsset(assets, address);
    return {
      price: get(selectedAsset, 'native.price.display', null),
      subtitle: get(selectedAsset, 'balance.display', symbol),

TokenFamilyWrap.getHeight = getHeight;

const familyIdSelector = state => state.familyId;
const openFamilyTabsSelector = state => state.openFamilyTabs;

const isFamilyOpenSelector = (familyId, openFamilyTabs) => ({
  isFamilyOpen: openFamilyTabs && openFamilyTabs[familyId],
});

const withFamilyOpenStateProps = createSelector(
  [familyIdSelector, openFamilyTabsSelector],
  isFamilyOpenSelector,
);

export default compose(
  withSafeTimeout,
  withFabSendAction,
  withOpenFamilyTabs,
  withProps(withFamilyOpenStateProps),
  withState('areChildrenVisible', 'setAreChildrenVisible', false),
  withHandlers({
    onHideChildren: ({ areChildrenVisible, setAreChildrenVisible }) => () => {
      if (areChildrenVisible) {
        setAreChildrenVisible(false);
      }
    },
    onPressFamilyHeader: ({ familyId, isFamilyOpen, setOpenFamilyTabs }) => () => (
      setOpenFamilyTabs({
        index: familyId,
        state: !isFamilyOpen,
      })

render = () => (
    
  )
}

export default compose(
  withNavigation,
  onlyUpdateForKeys(['textToCopy', 'tooltipText']),
)(CopyTooltip);

import { Text } from '../text';

const titleRenderer = withProps({
  size: 'large',
  weight: 'bold',
})(Text);

export default compose(
  pickProps(Object.keys(ListHeader.propTypes)),
  withProps({
    isSticky: true,
    shouldRasterizeIOS: true,
    showDivider: false,
    titleRenderer,
  }),
  onlyUpdateForKeys(['title']),
)(ListHeader);

color: colors.blueGreyLightest,
  size: 'tiny',
  weight: 'medium',
})`
  letter-spacing: 0.3px;
  line-height: 13;
  margin-bottom: 1;
  opacity: 0.7;
`;

const enhance = compose(
  withProps(({ text, title }) => ({
    text: upperFirst(text),
    title: upperCase(title),
  })),
  onlyUpdateForKeys(['text', 'title']),
);

const Tag = enhance(({ text, title, ...props }) => (
  
    
      <title>{title}</title>
      
    
  
));

Tag.propTypes = {
  text: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
};