| 1 | {"version":3,"sources":["DataTableTitle.tsx"],"names":["DataTableTitle","numeric","children","onPress","sortDirection","theme","style","numberOfLines","rest","current","spinAnim","React","useRef","Animated","Value","useEffect","timing","toValue","duration","useNativeDriver","start","textColor","colors","text","alpha","rgb","string","spin","interpolate","inputRange","outputRange","icon","styles","transform","rotate","I18nManager","isRTL","container","right","cell","sorted","color","displayName","StyleSheet","create","flex","flexDirection","alignContent","paddingVertical","justifyContent","height","lineHeight","fontSize","fontWeight","alignItems","marginLeft"],"mappings":";;;;;;;AAAA;;AACA;;AASA;;AACA;;AACA;;AACA;;;;;;;;;;AA8BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAMA,cAAc,GAAG,CAAC;AACtBC,EAAAA,OADsB;AAEtBC,EAAAA,QAFsB;AAGtBC,EAAAA,OAHsB;AAItBC,EAAAA,aAJsB;AAKtBC,EAAAA,KALsB;AAMtBC,EAAAA,KANsB;AAOtBC,EAAAA,aAAa,GAAG,CAPM;AAQtB,KAAGC;AARmB,CAAD,KASV;AACX,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAAwBC,KAAK,CAACC,MAAN,CAC5B,IAAIC,sBAASC,KAAb,CAAmBV,aAAa,KAAK,WAAlB,GAAgC,CAAhC,GAAoC,CAAvD,CAD4B,CAA9B;AAIAO,EAAAA,KAAK,CAACI,SAAN,CAAgB,MAAM;AACpBF,0BAASG,MAAT,CAAgBN,QAAhB,EAA0B;AACxBO,MAAAA,OAAO,EAAEb,aAAa,KAAK,WAAlB,GAAgC,CAAhC,GAAoC,CADrB;AAExBc,MAAAA,QAAQ,EAAE,GAFc;AAGxBC,MAAAA,eAAe,EAAE;AAHO,KAA1B,EAIGC,KAJH;AAKD,GAND,EAMG,CAAChB,aAAD,EAAgBM,QAAhB,CANH;AAQA,QAAMW,SAAS,GAAG,oBAAMhB,KAAK,CAACiB,MAAN,CAAaC,IAAnB,EAAyBC,KAAzB,CAA+B,GAA/B,EAAoCC,GAApC,GAA0CC,MAA1C,EAAlB;AAEA,QAAMC,IAAI,GAAGjB,QAAQ,CAACkB,WAAT,CAAqB;AAChCC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADoB;AAEhCC,IAAAA,WAAW,EAAE,CAAC,MAAD,EAAS,QAAT;AAFmB,GAArB,CAAb;AAKA,QAAMC,IAAI,GAAG3B,aAAa,gBACxB,oBAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAAC4B,MAAM,CAACD,IAAR,EAAc;AAAEE,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,MAAM,EAAEP;AAAV,OAAD;AAAb,KAAd;AAAtB,kBACE,oBAAC,8BAAD;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,IAAI,EAAE,EAFR;AAGE,IAAA,KAAK,EAAEtB,KAAK,CAACiB,MAAN,CAAaC,IAHtB;AAIE,IAAA,SAAS,EAAEY,yBAAYC,KAAZ,GAAoB,KAApB,GAA4B;AAJzC,IADF,CADwB,GAStB,IATJ;AAWA,sBACE,oBAAC,qCAAD;AAA0B,IAAA,QAAQ,EAAE,CAACjC,OAArC;AAA8C,IAAA,OAAO,EAAEA;AAAvD,KAAoEK,IAApE,gBACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACwB,MAAM,CAACK,SAAR,EAAmBpC,OAAO,IAAI+B,MAAM,CAACM,KAArC,EAA4ChC,KAA5C;AAAb,KACGyB,IADH,eAGE,oBAAC,aAAD;AACE,IAAA,KAAK,EAAE,CACLC,MAAM,CAACO,IADF,EAELnC,aAAa,GAAG4B,MAAM,CAACQ,MAAV,GAAmB;AAAEC,MAAAA,KAAK,EAAEpB;AAAT,KAF3B,CADT;AAKE,IAAA,aAAa,EAAEd;AALjB,KAOGL,QAPH,CAHF,CADF,CADF;AAiBD,CAzDD;;;AA2DAF,cAAc,CAAC0C,WAAf,GAA6B,iBAA7B;;AAEA,MAAMV,MAAM,GAAGW,wBAAWC,MAAX,CAAkB;AAC/BP,EAAAA,SAAS,EAAE;AACTQ,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,aAAa,EAAE,KAFN;AAGTC,IAAAA,YAAY,EAAE,QAHL;AAITC,IAAAA,eAAe,EAAE;AAJR,GADoB;AAQ/BV,EAAAA,KAAK,EAAE;AACLW,IAAAA,cAAc,EAAE;AADX,GARwB;AAY/BV,EAAAA,IAAI,EAAE;AACJW,IAAAA,MAAM,EAAE,EADJ;AAEJC,IAAAA,UAAU,EAAE,EAFR;AAGJC,IAAAA,QAAQ,EAAE,EAHN;AAIJC,IAAAA,UAAU,EAAE,KAJR;AAKJC,IAAAA,UAAU,EAAE;AALR,GAZyB;AAoB/Bd,EAAAA,MAAM,EAAE;AACNe,IAAAA,UAAU,EAAE;AADN,GApBuB;AAwB/BxB,EAAAA,IAAI,EAAE;AACJmB,IAAAA,MAAM,EAAE,EADJ;AAEJD,IAAAA,cAAc,EAAE;AAFZ;AAxByB,CAAlB,CAAf;;eA8Be,wBAAUjD,cAAV,C,EAEf","sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n StyleProp,\n StyleSheet,\n TouchableWithoutFeedback,\n View,\n ViewStyle,\n I18nManager,\n} from 'react-native';\nimport color from 'color';\nimport MaterialCommunityIcon from '../MaterialCommunityIcon';\nimport Text from '../Typography/Text';\nimport { withTheme } from '../../core/theming';\n\ntype Props = React.ComponentPropsWithRef<typeof TouchableWithoutFeedback> & {\n /**\n * Text content of the `DataTableTitle`.\n */\n children: React.ReactNode;\n /**\n * Align the text to the right. Generally monetary or number fields are aligned to right.\n */\n numeric?: boolean;\n /**\n * Direction of sorting. An arrow indicating the direction is displayed when this is given.\n */\n sortDirection?: 'ascending' | 'descending';\n /**\n * The number of lines to show.\n */\n numberOfLines?: number;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\n/**\n * A component to display title in table header.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img class=\"medium\" src=\"screenshots/data-table-header.png\" />\n * </figure>\n * </div>\n *\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { DataTable } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <DataTable>\n * <DataTable.Header>\n * <DataTable.Title\n * sortDirection='descending'\n * >\n * Dessert\n * </DataTable.Title>\n * <DataTable.Title numeric>Calories</DataTable.Title>\n * <DataTable.Title numeric>Fat (g)</DataTable.Title>\n * </DataTable.Header>\n * </DataTable>\n * );\n *\n * export default MyComponent;\n * ```\n */\n\nconst DataTableTitle = ({\n numeric,\n children,\n onPress,\n sortDirection,\n theme,\n style,\n numberOfLines = 1,\n ...rest\n}: Props) => {\n const { current: spinAnim } = React.useRef<Animated.Value>(\n new Animated.Value(sortDirection === 'ascending' ? 0 : 1)\n );\n\n React.useEffect(() => {\n Animated.timing(spinAnim, {\n toValue: sortDirection === 'ascending' ? 0 : 1,\n duration: 150,\n useNativeDriver: true,\n }).start();\n }, [sortDirection, spinAnim]);\n\n const textColor = color(theme.colors.text).alpha(0.6).rgb().string();\n\n const spin = spinAnim.interpolate({\n inputRange: [0, 1],\n outputRange: ['0deg', '180deg'],\n });\n\n const icon = sortDirection ? (\n <Animated.View style={[styles.icon, { transform: [{ rotate: spin }] }]}>\n <MaterialCommunityIcon\n name=\"arrow-up\"\n size={16}\n color={theme.colors.text}\n direction={I18nManager.isRTL ? 'rtl' : 'ltr'}\n />\n </Animated.View>\n ) : null;\n\n return (\n <TouchableWithoutFeedback disabled={!onPress} onPress={onPress} {...rest}>\n <View style={[styles.container, numeric && styles.right, style]}>\n {icon}\n\n <Text\n style={[\n styles.cell,\n sortDirection ? styles.sorted : { color: textColor },\n ]}\n numberOfLines={numberOfLines}\n >\n {children}\n </Text>\n </View>\n </TouchableWithoutFeedback>\n );\n};\n\nDataTableTitle.displayName = 'DataTable.Title';\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n flexDirection: 'row',\n alignContent: 'center',\n paddingVertical: 12,\n },\n\n right: {\n justifyContent: 'flex-end',\n },\n\n cell: {\n height: 24,\n lineHeight: 24,\n fontSize: 12,\n fontWeight: '500',\n alignItems: 'center',\n },\n\n sorted: {\n marginLeft: 8,\n },\n\n icon: {\n height: 24,\n justifyContent: 'center',\n },\n});\n\nexport default withTheme(DataTableTitle);\n\n// @component-docs ignore-next-line\nexport { DataTableTitle };\n"]} |