import Utils from '../utils/utils'; import Mixins from '../utils/mixins'; /* phenome-dts-imports import { ListIndex as ListIndexNamespace } from 'framework7/components/list-index/list-index'; */ /* phenome-dts-instance f7ListIndex: ListIndexNamespace.ListIndex */ export default { name: 'f7-list-index', props: { id: [String, Number], className: String, // phenome-react-line style: Object, // phenome-react-line init: { type: Boolean, default: true, }, listEl: [String, Object], indexes: { type: [String, Array], default: 'auto', }, scrollList: { type: Boolean, default: true, }, label: { type: Boolean, default: false, }, iosItemHeight: { type: Number, default: 14, }, mdItemHeight: { type: Number, default: 14, }, ...Mixins.colorProps, }, render() { const props = this.props; const { className, id, style, } = props; const classes = Utils.classNames( className, 'list-index', Mixins.colorClasses(props), ); return (
); }, componentWillUnmount() { if (!this.props.init) return; if (this.f7ListIndex && this.f7ListIndex.destroy) { this.f7ListIndex.destroy(); } }, componentDidMount() { const self = this; if (!self.props.init) return; self.$f7ready((f7) => { const el = self.refs.el; const { listEl, indexes, iosItemHeight, mdItemHeight, scrollList, label, } = self.props; self.f7ListIndex = f7.listIndex.create({ el, listEl, indexes, iosItemHeight, mdItemHeight, scrollList, label, on: { select(index, itemContent, itemIndex) { self.dispatchEvent('listindex:select listIndexSelect', itemContent, itemIndex); }, }, }); }); }, watch: { 'props.indexes': function watchIndexes() { if (!this.f7ListIndex) return; this.f7ListIndex.params.indexes = this.props.indexes; this.update(); }, }, methods: { update() { if (!this.f7ListIndex) return; this.f7ListIndex.update(); }, scrollListToIndex(indexContent) { if (!this.f7ListIndex) return; this.f7ListIndex.scrollListToIndex(indexContent); }, }, };