react-misc-toolbox

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll 23.04 [x] repair vertical accordion [x] imageviewer | accordion to render props 21.04 [x] button | fix invert [x] button | refactor [ ] theming for buttons - rework button from using colors to using themes [ ] use attrs method for frequently changed classes [ ] fix some colors (e.g. vivid) [ ] accordion | move to position clicked feature prop [x] accordion | repair right nav not derendering at limit [ ] rtg | react-styled-transition [ ] showcase | pass columns/rows as prop to unburden styles [ ] rtgtransition | allow for styledcomponents or search for alternative animation modules implementation 17.04 [x] more showcase buttons (e.g. nav) [x] showcase | replace isM with mediaquery [x] button example rework 16.04 [x] selectmany | fix 15.04 [x] card | move scs outside [x] card | showcasewrapper scs outside 8.04 button | rework with styledcomponents 7.04 6.04 ^selectopen | flip-on-click prop 2.04 imageviewer | replace/optimize imagezoom form | fix post-removal bugs form | simplify form composition inputs 1.04 ^accordion | fix touch scroll direction 30.03 ^accordion | 'click and hold' scroll speed prop ^accordion | fix repeat scroll on touch 28.03 selectmany | label and restructure examples ^selectmany | fix classNames ^selectmany | fix sorting 27.03 ^accordion | continuous scroll on press (with pause) ^accordion | test for buttons on resize ^accordion | test mount/unmount individually ^accordion | imitate facebook/google on scroll ^accordion | test touch behaviour 24.03 23.03 imageviewer | repair example ^form | rename options(props to rSMwACS) to optionLabels ^form | convert ACS to work without isSigned prop 22.03 ^CTCPopover | added isOn call props 20.03 ^CTCPopover | add 'overlap' positioning prop (to cover the trigger) 19.03 ^SelectOne | add onClick prop (optional propagation) 18.03 ?ImageViewer | vertical scroll fix ^CTCPopover | add 'pivot balance' prop to offset trigger position ^CTCPopover | more positions (esp. LEFTUP) 15.03 ^CTCPopover | add 'pivot balance' prop to offset trigger position ==13.03 selectmany | fix remove bug form | simplify form composition inputs ==11.03 form | simplify form composition inputs 10.03 ^ ctc | provide a way (and add an example) where an external button controls several ctc popovers that can also be switched on/off individually ctc | simplify 'connected' api 09.03 05.03 natural accordion scroll 26.02 > accordion > > touch-friendly buttons 25.02 > imageviewer > > +> > frame's auto value is at main image value > +> > vertical imagepreview scroll to selected image > > > resolve horizontal preview proportions > > +> > resolve zoom vs scroll conflict - disable zoom while swiping > > -> > scroll vertically on vertical layout > > adjust main image values easily via props > > +> > itemheight etc. refactor > > instant edge transition > > gradual drag transition > > ready for njs-socks import 24.02 22.02 > outsideclicklistener > > +> > refactor to hooks > imageviewer > > +> > 'kbeffect', 'outsideclicklistener' renderProps to useHooks > > > itemheight etc. refactor ==20.02 > imageviewer > > > prevent scrollY on image change > > partially reveal next image with touch swipe ==17.02 > selectmany > > +> > recompose to hooks > +> > 'onChange is not a function' fix > +> > stop removeitem/items propagation > form > > > vertical layout for composition ==15.02 > composition > > > convert string to number > > pass comparison operator as an option prop ==10.02 > FORM > > > (optionally) signed composition ==09.02 > try refactor renderProps to render state with hooks: > =} imageviewer > form/selectmany | advanced composition socket > > +> > highlight selected > > > extract advancedcomp to selectmany > > focus input on selecting comp > > adjust styles > > greater/equal/lesser sign > selectmany > > > recompose to hooks ==04.01 hide/show switch option (instead of rendering anew) ==03.01 > switch | repair ==02.01 > imageviewer | accordion > imageviewer | frame/item width props test > imageviewer | 2+ image and scroll test ==01.01 +> accordion | downward navbar stuck +> accordion | listeners aren't unmounted > ==23.00 > detectcollision example ?? > add button with props spread example (e.g inside ctcgeneric) ==16.01 ctcmercury | default trigger ctcmercury | color design prop ==14.01 form | selectone takes a string instead of an object == ==09.01 #selectmany selectmany | 'dropdown stays open after clicking an option' prop == - disable hover effect for touch devices - label example instances - spm/mpm should allow greater flexibility with their renderX api &--L { &--showstarboard { @include media-max(${mediaMinThresholdShowStarboardL}) { grid-template-columns: repeat(1, 1fr); } @for $i from 0 through 5 { @include media-min-to-max( ${mediaMinThresholdShowStarboardL} + $i * ${widthItemLwithSB}, ${mediaMinThresholdShowStarboardL} + ($i + 1) * ${widthItemLwithSB} ) { grid-template-columns: repeat(2 + $i, ${columnWidth}fr); } } @include media-min(${mediaMinThresholdShowStarboardL} + 6 * ${widthItemLwithSB}) { grid-template-columns: repeat(8, ${columnWidth}fr); } } &--hidestarboard { @include media-max(${mediaMinThresholdHideStarboardL}) { grid-template-columns: repeat(1, 1fr); } @for $i from 0 through 5 { @include media-min-to-max( ${mediaMinThresholdHideStarboardL} + 1px + $i * ${widthItemLnoSB}, ${mediaMinThresholdHideStarboardL} + ($i + 1) * ${widthItemLnoSB} ) { grid-template-columns: repeat(2 + $i, ${columnWidth}fr); } } @include media-min(${mediaMinThresholdHideStarboardL} + 1px + 6 * ${widthItemLnoSB}) { grid-template-columns: repeat(8, ${columnWidth}fr); } } } &--M { &--showstarboard { @include media-max(${mediaMinThresholdShowStarboardM}) { grid-template-columns: repeat(2, 1fr); } @for $i from 0 through 9 { @include media-min-to-max( ${mediaMinThresholdShowStarboardM} + 1px + $i * ${widthItemMwithSB}, ${mediaMinThresholdShowStarboardM} + ($i + 1) * ${widthItemMwithSB} ) { grid-template-columns: repeat(3 + $i, ${columnWidth}fr); } } @include media-min( ${mediaMinThresholdShowStarboardM} + 9 * ${widthItemMwithSB} + 1px ) { grid-template-columns: repeat(12, ${columnWidth}fr); } } &--hidestarboard { @include media-max(${mediaMinThresholdHideStarboardM}) { grid-template-columns: repeat(2, 1fr); } @for $i from 0 through 9 { @include media-min-to-max( ${mediaMinThresholdHideStarboardM} + 1px + $i * ${widthItemMnoSB}, ${mediaMinThresholdHideStarboardM} + ($i + 1) * ${widthItemMnoSB} ) { grid-template-columns: repeat(3 + $i, ${columnWidth}); } } @include media-min(${mediaMinThresholdHideStarboardM} + 9 * ${widthItemMnoSB} + 1px) { grid-template-columns: repeat(12, $columnWidth); } } } #mercurydrop refactor transition styles into rtg or (better) react-move #elevator provide getButtonProps api #imageviewer write a renderBottomNav(props) #list #(color)selector #ddpo rework to use #po as ancestor #button = general qol improvements #tooltip = write #mpm # gridbox # list # page scrollnav # presentation view #form make sure it doesn't throw an error if currentOption value is incorrect # multiplepagemodal +unnest rtgfade +update flex-direction on n-of-steps change - getChildrenProps for ddpo - refactor step styles into buttons - default buttons to inherit from <Button> - test for disabled status - fix disabled tail * fix selectone/many for MANY options with a scrollable list - CTCPopover to contain triggerX/basewidth defaults * clean up basewidth/optionWidth and triggerX/triggerWidth in ddpo and its users * CTCPopover container taking up too much space fix - rtgdropdown unnest * clean up selectmany styles * find a way to handle multiple classes being passed into button - fix on/off postfixes * polish everything * get rid of all jsx in favor of inline * get rid of scss in buttons and see if it works * decouple rtgdropdown from CTCPopover * write all viable dropdown combinations * add color theme gallery to pick proper dark/light gradients accordion - bg color for svg ^- optional getProps pattern * unnest button from div - @scrollnav - @detectscroll - @Accordion - vertical - @ddp - write remaining pivots - @button - add and rework - add @confirmationrequestmodal - test with disabled up - clean up styles - extra styles option as a scoped jsx stylesheet - default styles options as inline styles